<template>
    <div style="margin-left:300px">
      {{obj.flag}}
      <ul>
        <li v-for="item in list">
          {{item.name}} : {{item.age}}
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name: "Test",
  data(){
    return {
      list:[],
      obj:{}
    }
  },
  mounted() {
    //如果发现数据改变 界面没法渲染 则就使用$set
    //有时候同一段代码在不同逻辑下 有可能界面可以得到响应 有可能界面得不到响应; 因为存在一个连带渲染的问题!!!!
    setTimeout(()=>{
      // push splice.... 这些方法都是vue2.0提供出来的变异方法! 这些方法在被调用时 会去触发vue的响应式更新!
      this.list.push("d")

      //直接修改数组的length  和 通过下标来改数组的内容 都不能引起界面的更新!
      // this.list.length=0
      // this.list[3]="d"

      //哪怕list一开始是空数组  但是调用了push方法界面肯定会更新的!!!
      // this.list.push({name:"damu",age:18})

      //flag在data中没有注册过  flag的变化想引起界面的更新 得使用$set
      this.obj.flag="xxxx"
      // this.$set(this.obj,"flag","xxx")
    },2000)
  }
}
</script>

<style scoped>

</style>
